<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="关键词">
                <a-input-group style="display: inline-block; vertical-align: middle" :compact="true">
                  <a-select
                    style="width: 100px"
                    placeholder="请选择"
                    v-model="queryParam.keywordType"
                    default-value="1"
                  >
                    <a-select-option value="1">订单号</a-select-option>
                    <a-select-option value="2">昵称</a-select-option>
                    <a-select-option value="3">收件人</a-select-option>
                    <a-select-option value="4">用户ID</a-select-option>
                    <a-select-option value="5">商品名称</a-select-option>
                    <a-select-option value="6">手机号</a-select-option>
                  </a-select>
                  <a-input v-model="queryParam.keyword" :style="{ width: 'calc(100% - 100px)' }" />
                </a-input-group>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="日期范围">
                <a-range-picker
                  format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  @change="onChange"
                  @calendarChange="calendarChange"
                  :ranges="ranges"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (this.queryParam = { keywordType: '1' })"
                  >重置</a-button
                >
                <a-button style="margin-left: 8px" type="primary" @click="integralVisible = true">赠送积分</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-tabs default-active-key="1" @change="tabChange" v-model="tabKey">
          <a-tab-pane key="" tab="全部"> </a-tab-pane>
          <a-tab-pane key="0" tab="未付款" force-render> </a-tab-pane>
          <a-tab-pane key="3" tab="已完成"> </a-tab-pane>
        </a-tabs>
      </div>
      <s-table row-key="key" size="default" :columns="columns" :data="loadData" ref="table">
        <span slot="userInfo" slot-scope="text, record"> {{ record.nickname }}({{ text }}) </span>
        <!-- <span slot="cancel" slot-scope="record">
          <a-popconfirm
            title="Are you sure delete this task?"
            :visible="true"
            ok-text="Yes"
            cancel-text="No"
            @confirm="confirm(record)"
            @cancel="visible = false"
          >
          </a-popconfirm>
        </span> -->
        <span slot="orderStatus" slot-scope="text, record">
          <a-space :size="8">
            <span v-if="record.is_pay == 1">{{ record.is_pay | statusFilter(1) }}</span>
            <span v-else>{{ record.is_pay | statusFilter(1) }}</span>
          </a-space>
        </span>
      </s-table>
    </a-card>

    <a-modal title="赠送积分" :confirmLoading="priceModalLoading" forceRender v-model="integralVisible" @ok="integralSubmit">
      <a-form :form="integralForm" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <a-form-item label="赠送积分" required>
          <a-input-number
            v-decorator="['send_integral', { initialValue: 0 }]"
            :formatter="(value) => value + '%'"
            :precision="0"
            :min="0"
            :max="100"
          ></a-input-number>
        </a-form-item>
      </a-form>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import CitySelect from '@/components/CitySelect/CitySelect'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import { getOrderList, sendIntegral } from '@/api/plugin/scanCodePay'
import { STable } from '@/components'

const ORDER_STATUS = {
  0: '未支付',
  1: '已支付',
}
const CONFIRM_STATUS = {
  0: '未收货',
  1: '已收货',
}
const SEND_STATUS = {
  0: '未发货',
  1: '已发货',
}
const detailsColumns = [
  {
    title: '商品信息',
    dataIndex: 'info',
  },
]
const columns = [
  {
    title: '用户名（ID）',
    dataIndex: 'user_id',
    width: 200,
    scopedSlots: { customRender: 'userInfo' },
  },
  {
    title: '订单状态',
    dataIndex: 'is_pay',
    width: 100,
    scopedSlots: { customRender: 'orderStatus' },
  },
  {
    title: '价格',
    dataIndex: 'pay_price',
    width: 300,
  },
  {
    title: '订单ID',
    dataIndex: 'order_no',
    width: 300,
  },
  {
    title: '下单时间',
    dataIndex: 'created_at',
    width: 180,
  },
]

export default {
  name: 'OrderList',
  components: {
    STable,
    CitySelect,
  },
  data() {
    return {
      priceVisible: false,
      priceModalLoading: false,
      price: 0,
      express_price: 0,
      total_price: 0,
      express: {
        words: '',
      },
      expressList: [],
      selectExpress: String,
      activeKey: '1',
      sendVisible: false,
      sendModalLoading: false,
      area: [],
      address: {},
      addressVisible: false,
      addressModalLoading: false,
      visible: false,
      placement: 'right',
      selectDate: null,
      locale: zhCN,
      ranges: {
        一月内: () => [moment().startOf('day').subtract(1, 'month'), moment()],
        昨天: () => [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days')],
        最近一周: () => [moment().startOf('day').subtract(1, 'weeks'), moment()],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      reason: '',
      sellerComments: '',
      detailsColumns,
      records: {},
      // 高级搜索 展开/关闭
      advanced: false,
      selectedLevel: String,
      // 权限树
      permissionTree: [],
      modalLoading: false,
      defaultCheckedKeys: [],
      // 查询条件参数
      queryParam: {},
      tabKey: '',
      selectedRowKeys: [],
      selectedRows: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        Object.assign(parameter, this.queryParam)
        return getOrderList(parameter).then((res) => {
          this.expressList = res.data.express_list
          this.integralForm.setFieldsValue({
            send_integral: res.data.send_integral,
          })
          return res.data
        })
      },
      integralVisible: false, //赠送积分的弹框开关
      integralForm: this.$form.createForm(this), //表单数据
    }
  },
  watch: {
    price(val) {
      this.total_price = parseFloat(val) + parseFloat(this.express_price)
      if (isNaN(this.total_price)) {
        this.total_price = 0
      }
    },
    express_price(val) {
      this.total_price = parseFloat(val) + parseFloat(this.price)
      if (isNaN(this.total_price)) {
        this.total_price = 0
      }
    },
  },
  created() {},
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  filters: {
    statusFilter(key, type) {
      if (type === 1) {
        return ORDER_STATUS[key]
      }
      if (type === 2) {
        return SEND_STATUS[key]
      }
      if (type === 3) {
        return CONFIRM_STATUS[key]
      }
    },
  },
  methods: {
    resetSearchForm() {
      this.queryParam = {
        dateStart: moment(new Date()),
        dateEnd: moment(new Date()),
        keywordType: '1',
      }
    },
    // 积分比例设置提交
    integralSubmit(e) {
      this.priceModalLoading = true
      e.preventDefault()
      this.integralForm.validateFields(async (err, values) => {
        if (!err) {
          const res = await sendIntegral(values).catch(() => {
            this.priceModalLoading = false
          })
          if(res.code == 0) {
            this.$message.success(res.msg)
            this.integralVisible = false
          }
        }
        this.priceModalLoading = false
      })
    },
    moment,
    // 选中日期事件
    calendarChange(date, dateString) {
      // if (date.length <= 1) {
      //   // 选中开始日期事件，设置结束日期必须大于1天
      //   this.selectDate = date[0].add(1, 'days')
      // } else {
      //   this.selectDate = null
      // }
      this.selectDate = date[0]
    },
    // 选择后的事件
    onChange(date, dateString) {
      this.queryParam.dateStart = dateString[0]
      this.queryParam.dateEnd = dateString[1]
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    showDrawer(record) {
      this.visible = true
      this.records = record
    },
    onClose() {
      this.visible = false
    },
    // customRow (record, index) {
    //   return {
    //     on: {
    //       click: event => {
    //         this.visible = true
    //         this.records = record
    //       }
    //     }
    //   }
    // },
    tabChange(key) {
      this.queryParam.status = key
      this.$refs.table.refresh(true)
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .meta-content {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  height: 100%;
  width: 100%;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-avatar {
  width: 48px;
  height: 48px;
  margin-top: 30px;
}
.item-name {
  margin-bottom: 0.2em;
  font-weight: bold;
}
.red-title {
  color: red;
}
.little-content {
  font-size: 10px;
  font-weight: normal;
}
button {
  margin: 1px;
}
.button_style {
  text-align: center;
  width: 40px;
  height: 17px;
  font-size: 10px;
  padding: 0.5px 0 18px;
}
</style>
